<template>
  <div>
    <header>
      <header-top />
    </header>
    <section class="show-main">
      <div class="choice-date">
        <el-date-picker v-model="dateValue" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="vehicle-data">
        <div class="vehicle-data-item">
          <ul>
            <li>
              <img :src="require('../../assets/images/info_1.png')" />
              <div class="data-item-text">
                <p>车辆总数(辆)</p>
                <p>15802</p>
              </div>
            </li>
            <li>
              <img :src="require('../../assets/images/info_2.png')" />
              <div class="data-item-text">
                <p>车辆使用数(辆)</p>
                <p>15802</p>
              </div>
            </li>
            <li>
              <img :src="require('../../assets/images/info_3.png')" />
              <div class="data-item-text">
                <p>车辆行驶数(辆)</p>
                <p>15802</p>
              </div>
            </li>
          </ul>
        </div>
        <div class="vehicle-data-item">
          <ul>
            <li>
              <img :src="require('../../assets/images/info_4.png')" />
              <div class="data-item-text">
                <p>行驶里程总数(km)</p>
                <p class="font-color-1fdcd3">15802</p>
              </div>
            </li>
            <li>
              <img :src="require('../../assets/images/info_5.png')" />
              <div class="data-item-text">
                <p>行驶里程平均数(km)</p>
                <p class="font-color-1fdcd3">15802</p>
              </div>
            </li>
          </ul>
        </div>
        <div class="vehicle-data-item">
          <ul>
            <li>
              <img :src="require('../../assets/images/info_6.png')" />
              <div class="data-item-text">
                <p>行驶里程总数(km)</p>
                <p class="font-color-fd4f4e">15802</p>
              </div>
            </li>
            <li>
              <img :src="require('../../assets/images/info_7.png')" />
              <div class="data-item-text">
                <p>行驶里程平均数(km)</p>
                <p class="font-color-fd4f4e">15802</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="chart-region">
        <div class="chart-region-left">
          <div class="vehicle-type">
            <h1>
              <img :src="require('../../assets/images/title_1.png')" />
              车辆类型统计
            </h1>
            <div class="pie-diagram">
              <vehicle-type-pie />
            </div>
          </div>
          <div class="vehicle-status">
            <h1>
              <img :src="require('../../assets/images/title_2.png')" />
              车辆状态统计
            </h1>
            <div class="stacked-bar">
              <vehicle-status-bar />
            </div>
          </div>
        </div>
        <div class="chart-region-center">
          <div class="vehicle-distribution h764">
            <h1>
              <img :src="require('../../assets/images/title_3.png')" />
              车辆分布地图
            </h1>
            <div class="map-diagram">
              <china-map />
            </div>
          </div>
        </div>
        <div class="chart-region-right">
          <div class="vehicle-driving">
            <h1>
              <img :src="require('../../assets/images/title_3.png')" />
              车辆行驶数量
            </h1>
            <div class="line-diagram">
              <veicle-driving-line />
            </div>
          </div>
          <div class="vehicle-alarm">
            <h1>
              <img :src="require('../../assets/images/title_4.png')" />
              车辆报警统计
            </h1>
            <div class="double-bar-diagram">
              <vehicle-alarm-bar />
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import headerTop from './headerTop'
import vehicleTypePie from './vehicleTypePie'
import vehicleStatusBar from './vehicleStatusBar'
import veicleDrivingLine from './vehicleDrivingLine'
import vehicleAlarmBar from './vehicleAlarmBar'
import chinaMap from './chinaMap'
export default {
  components: {
    headerTop,
    vehicleTypePie,
    vehicleStatusBar,
    veicleDrivingLine,
    vehicleAlarmBar,
    chinaMap,
  },
  data() {
    return {
      dateValue: '',
    }
  },
}
</script>

<style lang="less" scoped>
.show-main {
  // background-color: #fff;
  margin-top: 0.263158rem;
  margin-right: 0.263158rem;
  margin-left: 0.263158rem;
  height: 14.315789rem;
  .choice-date {
    width: 2.157895rem;
    height: 0.578947rem;
    overflow: hidden;
    background-color: #04425f;
    color: #fff;
  }
  .vehicle-data {
    display: flex;
    margin-top: 0.263158rem;
    justify-content: space-between;
    > div {
      height: 1.815789rem;
      background-color: #04425f;
      &:nth-child(1) {
        width: 9.315789rem;
      }
      &:nth-child(2) {
        width: 7.131579rem;
      }
      &:nth-child(3) {
        width: 7.131579rem;
      }
    }
    ul {
      display: flex;
      height: 100%;
      > li {
        flex: 1;
        height: 100%;
        display: flex;
        overflow: hidden;
        > img {
          width: 0.684211rem;
          height: 0.684211rem;
          margin-left: 0.431579rem;
          margin-top: 0.458947rem;
        }
        .data-item-text {
          flex: 1;
          text-align: center;
          overflow: hidden;
          > p {
            &:nth-child(1) {
              margin-top: 0.4rem;
              font-size: 0.210526rem;
            }
            &:nth-child(2) {
              margin-top: 0.131579rem;
              font-size: 0.421053rem;
              color: #ffff43;
            }
          }
        }
      }
    }
  }
  .chart-region {
    margin-top: 0.394737rem;
    display: flex;
    justify-content: space-between;
    > div {
      &:nth-child(1) {
        width: 5.842105rem;
      }
      &:nth-child(2) {
        width: 11.842105rem;
      }
      &:nth-child(3) {
        width: 5.842105rem;
      }
    }
    .chart-region-right,
    .chart-region-center,
    .chart-region-left {
      .vehicle-status,
      .vehicle-driving,
      .vehicle-distribution,
      .vehicle-alarm,
      .vehicle-type {
        width: 100%;
        height: 4.605263rem;
        position: relative;
        border: 1px solid #0a3b58;
        margin-top: 0.526316rem;
        box-shadow: 0px 0 30px rgba(255, 255, 255, 0.1) inset;
        > h1 {
          font-size: 0.263158rem;
          position: absolute;
          left: 50%;
          transform: translate(-50%, -50%);
          background-color: #04425f;
          padding: 0.065789rem 0.328947rem;
          border-radius: 0.263158rem;
          > img {
            width: 0.263158rem;
            height: 0.263158rem;
            vertical-align: middle;
          }
        }
        > div {
          width: 100%;
          height: 100%;
        }
      }
      > div {
        &:nth-child(2) {
          margin-top: 0.828947rem;
        }
      }
    }
    .h764 {
      height: 10.052632rem !important;
    }
  }
}
.font-color-1fdcd3 {
  color: #1fdcd3 !important;
}
.font-color-fd4f4e {
  color: #fd4f4e !important;
}

// 修改data-picker的样式
/deep/.el-date-editor {
  width: 100% !important;
  .el-input__inner {
    border-radius: 0px;
    border: none;
    padding-right: 0px;
    padding-left: 0.723684rem;
    height: 0.578947rem;
    width: 2.157895rem;
    font-size: 14px;
    background-color: #04425f;
    color: #fff;
  }
  .el-input__prefix {
    font-size: 0.363158rem;
    .el-input__icon {
      line-height: 0.560526rem;
    }
  }
}
// 修改data-picker的样式end
</style>
